<template>
	<view class="content">
		<view class="report-content">
			<form>
				<view class="form-item uni-column">
					<view class="title">报送标题</view>
					<view class="form-content">
						<input type="text" placeholder="请填写标题" />
					</view>
				</view>
				<view class="form-item uni-column">
					<view class="title">事件类型</view>
					<view class="form-content">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
				<!-- 影响参数 -->
				<view class="parms-content">
					<view class="parms-info">
						<view class="item">
							<view class="label">影响范围</view>
							<input type="text" placeholder="请填写" />
							<view class="tips">km</view>
						</view>
						<view class="item">
							<view class="label">降雨量</view>
							<input type="text" placeholder="请填写" />
							<view class="tips">ml</view>
						</view>
						<view class="item">
							<view class="label">影响参数2</view>
							<input type="text" placeholder="请填写" />
							<view class="tips">单位</view>
						</view>
						<view class="item">
							<view class="label">影响参数3</view>
							<picker @change="bindPickerChange" :value="index" :range="parmsArray">
								<view class="uni-input">{{parmsArray[index]}}</view>
							</picker>
						</view>
						<view class="item describe">此处是描述内容，深圳市南山区发生严重洪涝灾，请安排人员紧急处理。此处是信息描述内容，此处是信息描述内容，此处是信息描述内容，此处是信息描述内容，此处是信息描述内容。</view>
					</view>
				</view>
				<view class="form-item uni-column">
					<view class="title">事发地点</view>
					<view class="form-content">
						<input type="text" placeholder="请填写地址" />
					</view>
				</view>
				<view class="form-item uni-column">
					<view class="title">信息描述</view>
					<view class="form-content">
						<textarea placeholder="信息描述" style="width: 100%;" value="深圳市观澜河水位持续上升，已经达到警戒水位线。此处是信息描述内容，深圳市南山区发生严重洪涝灾，请安排人员紧急处理。此处是信息描述内容，此处是信息描述内容。" />
					</view>
				</view>
			</form>
			
		</view>
		<view class="img-list">
			<view class="item" v-for="item,index in imgList" :key="index">
				<view class="iconfont icon-guanbi" @click="remove(index,'img')"></view>
				<image class="img" mode="aspectFill" :src="item.src" @click="lookImg(index)"></image>
			</view>
			<view class="item upload" @click="uploadImg">
				<view class="iconfont icon-shangchuantupian"></view>
				<text>上传图片</text>
			</view>
		</view>
		<view class="video-list">
			<view class="item" v-for="item,index in videoList" :key="index">
				<view class="iconfont icon-guanbi" @click="remove(index,'video')"></view>
				<video class="video" :src="item.src"></video>
			</view>
			<view class="item upload" @click="uploadVideo">
				<view class="iconfont icon-shangchuanshipin"></view>
				<text>上传视频</text>
			</view>
		</view>
		
		 <view class="btns">
				<button type="primary" plain="true">放弃报送</button>
				<button type="primary" plain="true">保存草稿</button>
				<button type="primary">报送信息</button>
		</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
					array: ['类型1', '类型2', '类型3', '类型4'],
					parmsArray:['否','是'],
					imgList:[
						{
							src:'https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg'
						},
						{
							src:'https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg'
						},
						{
							src:'https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg'
						}
					],
					videoList:[
						{src:'https://www.runoob.com/try/demo_source/movie.mp4'},
						{src:'https://www.runoob.com/try/demo_source/movie.mp4'}
					],
					index:0
			}
		},
		methods: {
				bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.index = e.target.value
				},
				// 图片上传
				uploadImg: function(){
					let that = this
					uni.chooseImage({
					  count: 10,
					  type: 'image',
					  success: function (res) {
							console.log(res.tempFilePaths)
							res.tempFilePaths.map(item=>{
								let imgObj = {}
								imgObj.src = item
								that.imgList.push(imgObj)
							})
					  }
					})
				},
				// 视频上传
				uploadVideo:function(){
					let that = this
					uni.chooseVideo({
						count: 3,
						sourceType: ['album', 'camera'],
						success: function (res) {
							let videoObj = {}
							videoObj.src = res.tempFilePath
							 that.videoList.push(videoObj)
						}
					})
				},
				// 查看图片
				lookImg: function(val) {
					let imgs = this.imgList.map(item=>{
						return item.src
					})
					uni.previewImage({
							urls: imgs,
							current:val
					});
				},
				// 删除对象
				remove: function(index,type){
					if(type == 'img'){
						this.imgList.splice(index, 1);
					} else {
						this.videoList.splice(index, 1);
					}
				}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.content {
		width: 100%;
		padding-top: 24rpx;
		background: #f9f9f9;
	}

	.report-content {
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 0 32rpx;
	}
	
	.form-item{
		min-height: 96rpx;
		line-height: 46rpx;
		padding: 25rpx 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		border-bottom: 2rpx solid #f9f9f9;
		font-size: 28rpx;
		.title{
			width: 200rpx;
			color: #2B2B2B;
		}
		.form-content{
			width: calc(100% - 200rpx);
		}
	}
	
	::v-deep .uni-input-wrapper,
	::v-deep .uni-textarea-wrapper{
		font-size: 28rpx;
	}	
	
	.parms-content{
		width: 100%;
		border-radius: 16rpx;
		background: #f9f9f9;
		padding: 16rpx;
		.parms-info{
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 16rpx;
		}
		.item{
			width: 100%;
			min-height: 80rpx;
			line-height: 46rpx;
			padding: 17rpx 0;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 2rpx solid #f9f9f9;
			font-size: 28rpx;
			.label{
				width: 200rpx;
				color: #2B2B2B;
			}
			.tips{
				width: 100rpx;
				text-align: right;
			}
		}
	}
	
	.img-list,
	.video-list{
		margin-top: 8rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 32rpx;
		.item{
			width: 23%;
			height: 160rpx;
			border-radius: 8rpx;
			margin: 1%;
			position: relative;
			.img,
			.video{
				width: 100%;
				height: 100%;
			}
			.icon-guanbi{
				position: absolute;
				right: 4rpx;
				top: 4rpx;
				z-index: 100;
				font-size: 32rpx;
				color: rgba($color: #FFF, $alpha: 0.9);
			}
		}
	}
	.upload{
		font-size: 24rpx;
		color: rgba(43,43,43,.4);
		text-align: center;
		line-height: 50rpx;
		padding: 30rpx 10rpx;
		border: 2rpx dashed rgba(43,43,43,.3);
		.iconfont{
			font-size: 40rpx;
		}
	}
	//按钮组
	.btns{
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		margin-top: 40rpx;
		background-color: #Fff;
		button{
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 8rpx;
			font-size: 32rpx;
		}
	}
</style>
